<template>

  <div>

<!--      <button class="primary" @click="settleAccounts">结算</button>-->
<!--      <button class="primary" @click="generateStatement">生成对账单</button>-->
<!--      <button :class="{ 'disabled': isDisabled }" @click="importData">导入</button>-->
<!--      <button :class="{ 'disabled': isDisabled }" @click="exportData">导出</button>-->
<!--      <button :class="{ 'disabled': isDisabled }" @click="printData">打印</button>-->

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="订单状态">
        <el-select v-model="formInline.orderStatus" placeholder="请选择活动区域">
          <el-option label="已签收" value="1">已签收</el-option>
          <el-option label="已拒绝" value="2">已拒绝</el-option>
          <el-option label="运输中" value="3">运输中</el-option>
          <el-option label="已取消" value="4">已取消</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="签收日期">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="formInline.former" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择时间" v-model="formInline.hoo" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>


    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="receivableNumber"
          label="应收单号">
      </el-table-column>
      <el-table-column
          prop="orderNumber"
          label="订单号">
      </el-table-column>
      <el-table-column
          prop="customer"
          label="客户">
      </el-table-column>
      <el-table-column
          prop="customerCode"
          label="客户编码">
      </el-table-column>
      <el-table-column
          prop="contractName"
          label="合同名称">
      </el-table-column>
      <el-table-column
          prop="orderStatus"
          label="订单状态">
        <template slot-scope="scope">
          <span v-if="scope.row.orderStatus==1">已签收</span>
          <span v-if="scope.row.orderStatus==2">已拒绝</span>
          <span v-if="scope.row.orderStatus==3">运输中</span>
          <span v-if="scope.row.orderStatus==4">已取消</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="signTime"
          label="签收时间">
        <template slot-scope="scope">{{ scope.row.signTime }}</template>
      </el-table-column>
      <el-table-column
          prop="shippingAddress"
          label="发货地址">
      </el-table-column>
      <el-table-column
          prop="receivingAddress"
          label="收货地址">
      </el-table-column>
      <el-table-column
          prop="settlementStatus"
          label="结算状态">
      </el-table-column>
      <el-table-column
          prop="settlementTime"
          label="结算时间">
        <template slot-scope="scope">{{ scope.row.settlementTime }}</template>
      </el-table-column>
      <el-table-column
          prop="reconciliationStatus"
          label="对账单状态">
      </el-table-column>
      <el-table-column
          prop="reconciliationNumber"
          label="对账单号">
      </el-table-column>
      <el-table-column
          prop="totalFreight"
          label="运费合计">
      </el-table-column>
      <el-table-column
          prop="transportationFee"
          label="运输费">
      </el-table-column>
      <el-table-column
          prop="insuranceFee"
          label="保险费">
      </el-table-column>
      <el-table-column
          prop="packagingFee"
          label="包装费">
      </el-table-column>
      <el-table-column
          prop="handlingFee"
          label="装卸费">
      </el-table-column>
      <el-table-column
          prop="transferFee"
          label="中转费">
      </el-table-column>
      <el-table-column
          prop="fuelFee"
          label="燃油费">
      </el-table-column>
      <el-table-column
          prop="serviceFee"
          label="服务费">
      </el-table-column>
      <el-table-column
          prop="otherFees"
          label="其他费用">
      </el-table-column>
      <el-table-column
          prop="cashPayment"
          label="现付">
      </el-table-column>
      <el-table-column
          prop="advancePayment"
          label="预付">
      </el-table-column>
      <el-table-column
          prop="cashOnDelivery"
          label="到付">
      </el-table-column>
      <el-table-column
          prop="periodicPayment"
          label="周期付">
      </el-table-column>
      <el-table-column
          prop="payableAmount"
          label="应付">
      </el-table-column>
      <el-table-column
          prop="reconciledAmount"
          label="已对账金额">
      </el-table-column>
      <el-table-column
          prop="unreconciledAmount"
          label="未对账金额">
      </el-table-column>
      <el-table-column
          prop="invoicingStatus"
          label="开票状态">
      </el-table-column>
      <el-table-column
          prop="invoicedAmount"
          label="已开票金额">
      </el-table-column>
      <el-table-column
          prop="uninvoicedAmount"
          label="未开票金额">
      </el-table-column>
      <el-table-column
          prop="repaymentStatus"
          label="回款状态">
      </el-table-column>
      <el-table-column
          prop="repaidAmount"
          label="已回款金额">
      </el-table-column>
      <el-table-column
          prop="unrepaidAmount"
          label="未回款金额">
      </el-table-column>
      <el-table-column
          prop="deductionAmount"
          label="扣款金额">
      </el-table-column>
      <el-table-column
          prop="shippingTime"
          label="发货时间">
        <template slot-scope="scope">{{ scope.row.shippingTime }}</template>
      </el-table-column>
      <el-table-column
          prop="origin"
          label="始发地">
      </el-table-column>
      <el-table-column
          prop="destination"
          label="目的地">
      </el-table-column>
      <el-table-column
          prop="carrier"
          label="承运商">
      </el-table-column>
      <el-table-column
          prop="driver"
          label="司机">
      </el-table-column>
      <el-table-column
          prop="phoneNumber"
          label="手机号码">
      </el-table-column>
      <el-table-column
          prop="creator"
          label="创建人">
      </el-table-column>
      <el-table-column
          prop="creationTime"
          label="创建时间">
        <template slot-scope="scope">{{ scope.row.creationTime }}</template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleClick(scope.row)">结算</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formInline.pages"
        :page-sizes="[10,11,12,13]"
        :page-size="formInline.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>



  </div>
</template>

<script>
import axios from "axios";

export default {
  data(){
    return{
      formInline:{
        pages: 1,
        size: 10,
        orderStatus: '',
        former: '',
        hoo: ''
      },
      orderNumber :'',
      tableData: [],
      total: 0,
    }
  },
  created(){
    this.onSubmit();
    console.log(this.$route.params.id);
    this.receivableNumber=this.$route.query.reconciliationId;
    this.selectOne();
  },
  methods: {
    selectOne(){
      if(this.receivableNumber==''){
        console.log(1231231)
        return;
      }else{
        axios.get("http://localhost:10086/finance/receivable/selectOne",{params:{receivableNumber:this.receivableNumber}}).then(res => {
          console.log(res);
        })
      }
    },
    onSubmit(){
      console.log(this.formInline)
      axios.post("http://localhost:10086/finance/receivable/findAll",this.formInline).then(res => {
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.formInline.size = val;
      this.onSubmit()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.formInline.pages = val;
      this.onSubmit()
    },
    handleClick(row) {
      // 这里可以传递 row 中的数据到新页面，比如通过 query 参数
      console.log(row.id)
      this.$router.push({ name: 'SettlementPage', query: { id: row.id }});
    }

  }
};
</script>
